<script setup>
import { ref } from 'vue'
import {
  User,
  UserFilled,
  House,
  Avatar,
  Notebook,
  UploadFilled,
  Calendar,
  CreditCard,
  Key,
  DocumentCopy,
  Present,
  Ship,
  Sunny,
  Files,
  FirstAidKit,
  FolderAdd,
  DocumentChecked,
  DocumentDelete,
  Sort,
  ArrowUpBold,
  ArrowDownBold,
  HomeFilled,
  Service,
  TurnOff,
  Open,
  EditPen,
  Reading,
  Bicycle,
  AddLocation,
  Notification,
  ChatRound,
  Star,
  MessageBox,
  BrushFilled,
  Bowl,
  OfficeBuilding,
  Wallet,
  Coin,
  Suitcase,
  DataLine,
  Discount,
  WalletFilled,
  Histogram,
  TakeawayBox
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ElMessage, ElIcon } from 'element-plus';

const router = useRouter();

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}
</script>

<template>
  <!-- 导航栏-->

  <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router="true"
  >
    <div style="height: 60px;background-color: white;color: black;display: flex;align-items: center;justify-content: center">
      <img src="../../src/assets/jjlogo.jpg" style="width: 40px;height: 40px">交通管理系统
    </div>

    <el-menu-item
        index="/user/people/homepage"
    >
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <!--日常-->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Notebook /></el-icon>
        <span style="font-size: 18px">日常管理</span>
      </template>
<!--      <el-sub-menu index="1-1">
        <template #title>
          <el-icon><MessageBox /></el-icon>
          <span style="font-size: 18px">通告管理</span>
        </template>
        <el-menu-item index="/user/notice/group">
          <el-icon><Star /></el-icon>
          <template #title>通告分组设置</template>
        </el-menu-item>
        <el-menu-item index="/user/notice">
          <el-icon><Star /></el-icon>
          <template #title>通告管理</template>
        </el-menu-item>
        <el-menu-item index="/user/notice/total">
          <el-icon><Star /></el-icon>
          <template #title>通告汇总</template>
        </el-menu-item>
      </el-sub-menu>-->
      <el-sub-menu index="1-2">
        <template #title>
          <el-icon><ChatRound /></el-icon>
          <span style="font-size: 18px">会议管理</span>
        </template>
<!--        <el-menu-item index="/index/chamber">
          <el-icon><Star /></el-icon>
          <template #title>会议室信息维护</template>
        </el-menu-item>-->
        <el-menu-item index="/user/chamber/reserve">
          <el-icon><Star /></el-icon>
          <template #title>会议预约</template>
        </el-menu-item>
<!--        <el-menu-item index="/user/chamber/reserveM">
          <el-icon><Star /></el-icon>
          <template #title>预约管理</template>
        </el-menu-item>-->
<!--        <el-menu-item index="/user/chamber/sign">
          <el-icon><Star /></el-icon>
          <template #title>会议签到</template>
        </el-menu-item>-->
      </el-sub-menu>
      <el-sub-menu index="1-3">
        <template #title>
          <el-icon><BrushFilled /></el-icon>
          <span style="font-size: 18px">维修</span>
        </template>
        <el-menu-item index="/user/repair/apply">
          <el-icon><Star /></el-icon>
          <template #title>维修申请</template>
        </el-menu-item>
<!--        <el-menu-item index="/index/repair/applyM">
          <el-icon><Star /></el-icon>
          <template #title>维修管理</template>
        </el-menu-item>-->
<!--        <el-menu-item index="/user/repair/resource">
          <el-icon><Star /></el-icon>
          <template #title>单据跟踪</template>
        </el-menu-item>-->
      </el-sub-menu>
      <el-sub-menu index="1-4">
        <template #title>
          <el-icon><Bowl /></el-icon>
          <span style="font-size: 18px">伙食管理</span>
        </template>
<!--        <el-menu-item index="/user/dish/pay">
          <el-icon><Star /></el-icon>
          <template #title>充值信息汇总</template>
        </el-menu-item>-->
<!--        <el-menu-item index="/user/dish/total">
          <el-icon><Star /></el-icon>
          <template #title>伙食信息汇总</template>
        </el-menu-item>-->
        <el-menu-item index="/user/dish/dishM">
          <el-icon><Star /></el-icon>
          <template #title>菜品配置</template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="1-5">
        <template #title>
          <el-icon><OfficeBuilding /></el-icon>
          <span style="font-size: 18px">办公用品</span>
        </template>
        <el-menu-item index="/user/office/apply">
          <el-icon><Star /></el-icon>
          <template #title>办公用品申领</template>
        </el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <!--人事-->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Service /></el-icon>
        <span style="font-size: 18px">人事管理</span>
      </template>
      <el-sub-menu index="2-1">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span style="font-size: 18px">上岗管理</span>
        </template>
<!--        <el-menu-item index="/people/contractors">
          <el-icon><User /></el-icon>
          <template #title>合同工</template>
        </el-menu-item>
        <el-menu-item index="/people/external">
          <el-icon><Avatar /></el-icon>
          <template #title>外聘工</template>
        </el-menu-item>
        <el-menu-item index="/people/excpntracts">
          <el-icon><Avatar /></el-icon>
          <template #title>外聘人员合同</template>
        </el-menu-item>
                <el-menu-item index="/people/contractfiling">
                  <el-icon><UploadFilled /></el-icon>
                  <template #title>合同备档</template>
                </el-menu-item>-->
        <el-menu-item index="/user/people/holiday">
          <el-icon><Calendar /></el-icon>
          <template #title>节假日配置</template>
        </el-menu-item>
        <el-menu-item index="/user/people/cards">
          <el-icon><CreditCard /></el-icon>
          <template #title>门卡配置</template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2-2">
        <template #title>
          <el-icon><HomeFilled /></el-icon>
          <span style="font-size: 18px">出境管理</span>
        </template>
        <el-menu-item index="/user/people/brcards">
          <el-icon><Key /></el-icon>
          <template #title>证件借还</template>
        </el-menu-item>
        <!--        <el-menu-item index="/people/settime">
                  <el-icon><Watch /></el-icon>
                  <template #title>汇总时间设置</template>
                </el-menu-item>-->
        <!--        <el-menu-item index="/index/chamber/reserveM">
                  <el-icon><DocumentCopy /></el-icon>
                  <template #title>直系亲属报告</template>
                </el-menu-item>-->
        <el-menu-item index="/user/people/gift">
          <el-icon><Present /></el-icon>
          <template #title>礼品领取</template>
        </el-menu-item>
<!--        <el-menu-item index="/user/people/giftaudit">
          <el-icon><Present /></el-icon>
          <template #title>礼品管理</template>
        </el-menu-item>-->
        <!--        <el-menu-item index="/index/chamber/sign">
                  <el-icon><Stamp /></el-icon>
                  <template #title>电子签章申请</template>
                </el-menu-item>-->
        <el-menu-item index="/user/people/exit">
          <el-icon><Ship /></el-icon>
          <template #title>出境申请</template>
        </el-menu-item>
<!--        <el-menu-item index="/people/exitaudit">
          <el-icon><Ship /></el-icon>
          <template #title>出境审核</template>
        </el-menu-item>-->
      </el-sub-menu>
      <el-sub-menu index="2-3">
        <template #title>
          <el-icon><Sunny /></el-icon>
          <span style="font-size: 18px">出勤管理</span>
        </template>
        <!--        <el-menu-item index="/people/attendance">
                  <el-icon><Files /></el-icon>
                  <template #title>出勤汇总</template>
                </el-menu-item>-->
        <el-menu-item index="/user/people/overtime">
          <el-icon><FirstAidKit /></el-icon>
          <template #title>加班申请</template>
        </el-menu-item>
<!--        <el-menu-item index="/people/overtimeaudit">
          <el-icon><FirstAidKit /></el-icon>
          <template #title>加班审核</template>
        </el-menu-item>-->
        <el-menu-item index="/user/people/gopolice">
          <el-icon><FolderAdd /></el-icon>
          <template #title>出警申请</template>
        </el-menu-item>
<!--        <el-menu-item index="/people/gopoliceaudit">
          <el-icon><FolderAdd /></el-icon>
          <template #title>出警审核</template>
        </el-menu-item>-->
        <el-menu-item index="/user/people/leave">
          <el-icon><DocumentChecked /></el-icon>
          <template #title>请假申请</template>
        </el-menu-item>
<!--        <el-menu-item index="/people/leaveaudit">
          <el-icon><DocumentChecked /></el-icon>
          <template #title>请假审核</template>
        </el-menu-item>-->
<!--        <el-menu-item index="/user/people/cancelltion">
          <el-icon><DocumentDelete /></el-icon>
          <template #title>销假申请</template>
        </el-menu-item>-->
<!--        <el-menu-item index="/people/cancelltionaudit">
          <el-icon><DocumentDelete /></el-icon>
          <template #title>销假审核</template>
        </el-menu-item>-->
      </el-sub-menu>
      <!--      <el-sub-menu index="2-4">
              <template #title>
                <el-icon><Money /></el-icon>
                <span style="font-size: 18px">工资管理</span>
              </template>
              <el-menu-item index="/people/wages">
                <el-icon><Coin /></el-icon>
                <template #title>工资汇总</template>
              </el-menu-item>
            </el-sub-menu>-->
<!--      <el-sub-menu index="2-5">
        <template #title>
          <el-icon><Sort /></el-icon>
          <span style="font-size: 18px">交接管理</span>
        </template>
        <el-menu-item index="/user/people/connect">
          <el-icon><ArrowUpBold /></el-icon>
          <template #title>交接管理</template>
        </el-menu-item>
        <el-menu-item index="/user/people/leavepost">
          <el-icon><ArrowDownBold /></el-icon>
          <template #title>离职管理</template>
        </el-menu-item>
      </el-sub-menu>-->
    </el-sub-menu>
    <!--报销补助    -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Wallet /></el-icon>
        <span style="font-size: 18px">报销补帖</span>
      </template>
      <el-sub-menu index="3-1">
        <template #title>
          <el-icon><CreditCard /></el-icon>
          <span style="font-size: 18px">报销管理</span>
        </template>
        <el-menu-item index="/user/daily/apply">
          <el-icon><DataLine /></el-icon>
          <template #title>日常报销申请</template>
        </el-menu-item>
        <el-menu-item index="/user/sortie/apply">
          <el-icon><Suitcase /></el-icon>
          <template #title>出差报销申请</template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3-2">
        <template #title>
          <el-icon><Discount /></el-icon>
          <span style="font-size: 18px">补贴管理</span>
        </template>
        <el-menu-item index="/user/pay/apply">
          <el-icon><WalletFilled /></el-icon>
          <template #title>支付申请</template>
        </el-menu-item>
        <el-menu-item index="/user/overtime/apply">
          <el-icon><Histogram /></el-icon>
          <template #title>员工加班费补贴申请</template>
        </el-menu-item>
        <el-menu-item index="/user/condole/apply">
          <el-icon><TakeawayBox /></el-icon>
          <template #title>慰问金申请</template>
        </el-menu-item>
        <el-menu-item index="/user/hire/apply">
          <el-icon><Avatar /></el-icon>
          <template #title>外聘人员费申请</template>
        </el-menu-item>
      </el-sub-menu>
<!--      <el-sub-menu index="3-3">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span style="font-size: 18px">招待费月汇总</span>
        </template>
        <el-menu-item index="/reimbursement/entertain/total">
          <el-icon><Avatar /></el-icon>
          <template #title>招待费月汇总</template>
        </el-menu-item>
      </el-sub-menu>-->
    </el-sub-menu>
    <!--汇总分析    -->
<!--    <el-sub-menu index="4">
      <template #title>
        <el-icon><Notebook /></el-icon>
        <span style="font-size: 18px">汇总分析</span>
      </template>
      <el-menu-item index="/analyze/timeCard">
        <el-icon><Avatar /></el-icon>
        <template #title>出勤汇总分析</template>
      </el-menu-item>
      <el-menu-item index="/analyze/repairCard">
        <el-icon><Avatar /></el-icon>
        <template #title>维修汇总分析</template>
      </el-menu-item>
      <el-menu-item index="/analyze/dishCard">
        <el-icon><Avatar /></el-icon>
        <template #title>用餐汇总分析</template>
      </el-menu-item>
    </el-sub-menu>-->
    <!--  个人中心  -->
    <el-sub-menu index="5">
      <template #title>
        <el-icon><User /></el-icon>
        <span style="font-size: 18px">我的</span>
      </template>
<!--      <el-menu-item index="/user/profile/examine">
        <el-icon><TurnOff /></el-icon>
        <template #title>我的审批</template>
      </el-menu-item>-->
      <!--      <el-menu-item index="/profile/approve">
              <el-icon><Open /></el-icon>
              <template #title>已审批</template>
            </el-menu-item>-->
      <el-sub-menu index="5-1">
        <template #title>
          <el-icon><EditPen /></el-icon>
          <span style="font-size: 18px">个人信息</span>
        </template>
        <el-menu-item index="/user/profile/info">
          <el-icon><Avatar /></el-icon>
          <template #title>基本信息</template>
        </el-menu-item>
        <el-menu-item index="/user/profile/study">
          <el-icon><Reading /></el-icon>
          <template #title>学历信息</template>
        </el-menu-item>
        <el-menu-item index="/user/profile/parent">
          <el-icon><Key /></el-icon>
          <template #title>直系亲属</template>
        </el-menu-item>
        <el-menu-item index="/user/profile/document">
          <el-icon><Notebook /></el-icon>
          <template #title>证件信息</template>
        </el-menu-item>
        <el-menu-item index="/user/profile/contract">
          <el-icon><DocumentCopy /></el-icon>
          <template #title>合同信息</template>
        </el-menu-item>
        <el-menu-item index="/user/profile/holiday">
          <el-icon><Bicycle /></el-icon>
          <template #title>节假日信息</template>
        </el-menu-item>
        <!--        <el-menu-item index="/profile/timeCard">
                  <el-icon><AddLocation /></el-icon>
                  <template #title>出勤信息</template>
                </el-menu-item>-->
        <el-menu-item index="/user/profile/doorCard">
          <el-icon><Notification /></el-icon>
          <template #title>我的门卡</template>
        </el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.el-menu-item{
  font-size: 18px;
}
.el-menu-item.is-active{
  font-size: 18px;
}
</style>